@use "sass:string";

.radio-button {
    &:hover {
        .radio {
            -fx-background-color: -df-background;
            -fx-border-color: -df-text-dark;
        }
    }
    &:selected {
        .dot {
            -fx-background-color: -df-text-dark;
        }
        &:hover {
            .dot {
                -fx-background-color: -df-text;
            }
        }
    }

    .radio {
        -fx-background-radius: 50%;
        -fx-border-radius: 50%;
        -fx-background-image: string.unquote("null");
        -fx-background-color: -df-background;
        -fx-border-width: 1;
        -fx-border-color: -df-background-lighter;
    }

    .dot {
        -fx-shape: "M 100 100 a 50 50 0 1 0 0.00001 0";
    }
}
